<template>
  <div style="text-align: center; width: 680px; margin: auto; background: #fff">
    <table
        cellpadding="0"
        cellspacing="0"
        style="
        table-layout: fixed;
        position: relative;
        width: 95%;
        font-family: 仿宋_GB2312;
        font-size: 16px;
        margin: auto;
      "
    >
      <tr style="height: 10px">
        <td
            v-for="item in 100"
            :key="item"
            style="width: 1%; text-align: center"
        />
      </tr>
      <tr style="height: 60px">
        <td colspan="100" style="text-align: center">
          <span id="Lab_title" style="font-size: 24px; font-weight: bold"
          >水利水电工程施工企业安全生产管理人员<br/>考核合格证书个人申领申请表</span
          >
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="14" class="TableBorderOther">姓名</td>
        <td colspan="14" class="TableBorderOther">
          <input
            :disabled="disabled"
            v-model.trim="tempFormData.name"
            type="text"
            class="input-center"
          />
        </td>
        <td colspan="14" class="TableBorderOther">性别</td>
        <td colspan="14" class="TableBorderOther">
          <Aselect
              :disabled="disabled"
              v-model="tempFormData.sex"
              :options="$dict('sex').list()"
              placeholder=""
          />
        </td>
        <td colspan="14" class="TableBorderOther">职务</td>
        <td colspan="14" class="TableBorderOther">
          <input
              :disabled="disabled"
              v-model.trim="tempFormData.duty"
              type="text"
              class="input-center"
          />
        </td>
        <td colspan="16" rowspan="4" class="TableBorderRight">
          <img
              style="width: 100%; height: 100%"
              :src="tempFormData.idPhoto && tempFormData.idPhoto.thumbnailUri"
              alt=""
          />
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="14" class="TableBorderOther">身份证号</td>
        <td colspan="42" class="TableBorderOther">
          <input
              :disabled="disabled"
              v-model.trim="tempFormData.paperCode"
              type="text"
              class="input-center"
          />
        </td>
        <td colspan="14" class="TableBorderOther">职称</td>
        <td colspan="14" class="TableBorderOther">
          <Cascader
              :disabled="disabled"
              v-model="tempFormData.titleLevel"
              :options="titleLevelDict"
              :filterable="true"
              :change-on-select="true"
              :show-full-levels="false"
              placeholder=""
          ></Cascader>
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="14" class="TableBorderOther">企业名称</td>
        <td colspan="70" class="TableBorderOther">
          <input
              :disabled="disabled"
              v-model.trim="tempFormData.entName"
              type="text"
              class="input-center"/>
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="14" class="TableBorderOther">资质等级</td>
        <td colspan="14" class="TableBorderOther">
          <Aselect
              :disabled="disabled"
              v-model="tempFormData.entLevel"
              :options="entLevelDict"
              placeholder=""></Aselect>
        </td>
        <td colspan="28" class="TableBorderOther">管理人员类别</td>
        <td colspan="28" class="TableBorderOther">
          <Aselect
              :disabled="disabled"
              v-model="tempFormData.safeTypeCode"
              :options="safeTypeDict"
              @change="safeTypeChange"
              placeholder=""
          />
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="14" class="TableBorderOther">通讯地址</td>
        <td colspan="56" class="TableBorderOther">
          <input
              :disabled="disabled"
              v-model.trim="tempFormData.address"
              type="text"
              class="input-center"
          />
        </td>
        <td colspan="14" class="TableBorderOther">邮编</td>
        <td colspan="16" class="TableBorderRight">
          <input
              :disabled="disabled"
              v-model.trim="tempFormData.postcode"
              type="text"
              class="input-center"
          />
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="14" class="TableBorderOther">联系电话</td>
        <td colspan="56" class="TableBorderOther">
          <input
              :disabled="disabled"
              v-model.trim="tempFormData.phone"
              type="text"
              class="input-center"
          />
        </td>
        <td colspan="14" class="TableBorderOther">传真</td>
        <td colspan="16" class="TableBorderRight">
          <input
              :disabled="disabled"
              v-model.trim="tempFormData.fax"
              type="text"
              class="input-center"
          />
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="14" class="TableBorderOther">最高学历</td>
        <td colspan="14" class="TableBorderOther">
          {{ $dict('education').get(tempFormData.education) }}
        </td>
        <td colspan="14" class="TableBorderOther">学位</td>
        <td colspan="28" class="TableBorderOther">
          {{ $dict('degree').get(tempFormData.degree) }}
        </td>
        <td colspan="14" class="TableBorderOther">毕业时间</td>
        <td colspan="16" class="TableBorderRight">
          {{ tempFormData.graduatedTime }}
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="28" class="TableBorderBottom">毕（肄、结）业院校</td>
        <td colspan="42" class="TableBorderBottom">{{ tempFormData.school }}</td>
        <td colspan="14" class="TableBorderBottom">所学专业</td>
        <td colspan="16" class="TableBorderRightBottom">{{ tempFormData.major }}</td>
      </tr>
    </table>
  </div>
</template>
<script>
import Aselect from '@/components/Select/Aselect';
import safeTypeDict from '@/assets/js/safeTypeDict.js';
import { fieldsValidate } from '@/utils/validate.js';
import businessApi from '@/api/business';
import titleLevelDict from "@/assets/js/titleLevelDict";
import Cascader from "@/components/Select/Cascader";

export default {
  props: {
    formData: {
      type: Object,
      default: () => {},
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  components: { Aselect, Cascader },
  data() {
    return {
      checkValue1: '111',
      idCode: '',
      sexCode: '',
      tempFormData: {},
      entLevelDict: safeTypeDict.entLevel,
      safeTypeDict: safeTypeDict.safeType,
      titleLevelDict: titleLevelDict.titleLevel,
    };
  },
  mounted() {},
  watch: {
    formData: {
      handler(val) {
        this.tempFormData = val || {};
        if (this.tempFormData.paperType === '111') {
          this.idCode = this.tempFormData.paperCode;
          this.sexCode = val?.sex;
        }
      },
      immediate: true,
    },
    checkValue1: {
      handler(val) {
        this.tempFormData.paperType = val;
      },
      immediate: true,
    },
  },
  computed: {
    safeQua() {
      return this.$store.state.user.userQua;
    },
  },
  methods: {
    // 职称转换
    titleLevelCode2Name(code) {
      for (let i = 0; i < titleLevelDict.titleLevel.length; i++) {
        if (titleLevelDict.titleLevel[i].value === code) {
          return titleLevelDict.titleLevel[i].label;
        }
        if (titleLevelDict.titleLevel[i].children) {
          for (let j = 0; j < titleLevelDict.titleLevel[i].children.length; j++) {
            if (titleLevelDict.titleLevel[i].children[j].value === code) {
              return titleLevelDict.titleLevel[i].children[j].label;
            }
          }
        }
      }
      return '';
    },
    pickerOptions() {
      return {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      };
    },
    // 安管人员类型变更
    safeTypeChange(val) {
      if (!this.safeQua) {
        this.$alert(
            '未查询到您的安全生产管理人员知识考试信息，请您前往完善资格信息',
            '提示',
            {
              confirmButtonText: '确定',
              showClose: false,
              type: 'warning',
              center: true,
              callback: () => {
                this.$router.push({
                  name: 'dockPersonalUserInfoQlf',
                  params: {
                    ...this.$route.query,
                    certificate: 3,
                    stepActive: this.stepActive,
                  },
                });
              },
            },
        );
      } else {
        let { mainScore, projScore, classifyScore } = this.safeQua;
        if (val == 'A' && !mainScore) {
          this.$message.warning('您未填写安全生产管理人员知识考试成绩，不能申领此安全生产管理人员证书');
          this.$nextTick(() => {
            this.tempFormData.safeTypeCode = undefined;
          });
        } else if (val == 'B' && !projScore) {
          this.$message.warning('您未填写安全生产管理人员知识考试成绩，不能申领此安全生产管理人员证书');
          this.$nextTick(() => {
            this.tempFormData.safeTypeCode = undefined;
          });
        } else if (val == 'C' && !classifyScore) {
          this.$message.warning('您未填写安全生产管理人员知识考试成绩，不能申领此安全生产管理人员证书');
          this.$nextTick(() => {
            this.tempFormData.safeTypeCode = undefined;
          });
        }
      }
      if (!businessApi.canReg(val)) {
        this.$message.warning('已有此安全资格证书，不能重复申领');
        this.$nextTick(() => {
          this.tempFormData.safeTypeCode = undefined;
        })
      }
    },
    // 校验规则
    validateFields() {
      const rules = {
        sex: [
          { required: true, text: '请选择性别' },
        ],
        duty: [
            { required: true, text: '请输入职务' },
            {
              maxLength: 128,
              text: '职务长度应小于128位',
            },
        ],
        paperCode: [
          { required: true, text: '请输入身份证号' },
          {
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            text: '请输入正确格式的身份证号码',
          },
        ],
        entName: [
          { required: true, text: '请输入企业名称' },
          {
            maxLength: 256,
            text: '企业名称长度应小于256位',
          },
        ],
        entLevel: [
          { required: true, text: '请选择资质等级' },
        ],
        safeTypeCode: [
          { required: true, text: '请选择管理人员类别' },
        ],
        address: [{ required: true, text: '请输入通讯地址' }, {
          maxLength: 500,
          text: '通讯地址长度应小于500位',
        }],
        postcode: [
          { required: true, text: '请输入邮编' },
          {
            pattern: /^[1-9][0-9]{5}$/,
            text: '请输入正确的邮编',
          },
        ],
        phone: [
          { required: true, text: '请输入联系电话' },
        ],
        fax: [
          { required: true, text: '请输入传真' },
          {
            pattern: /^(0?\d{2,3}-)?[1-9]\d{6,7}(-\d{1,4})?$/,
            text: '请输入正确的传真',
          }],
        school: [{ required: true, text: '请输入毕（肄、结）业院校' },
          {
            maxLength: 100,
            text: '毕（肄、结）业院校长度应小于100位',
          }],
        major: [{ required: true, text: '请输入所学专业' }],
        // resumes: [{ required: true, text: '请输入工作经历' },
        //   {
        //     maxLength: 2000,
        //     text: '工作经历长度应小于2000位',
        //   }],
        // performance: [{ required: true, text: '请输入工程及安全生产业绩' },
        //   {
        //     maxLength: 2000,
        //     text: '工程及安全生产业绩长度应小于2000位',
        //   }],
        // training: [{ required: true, text: '请输入近三年安全生产学习培训情况' },
        //   {
        //     maxLength: 2000,
        //     text: '近三年安全生产学习培训情况长度应小于2000位',
        //   }],
      };
      return fieldsValidate(this.tempFormData, rules, this);
    },
    // 校验表单
    validateForm() {
      const mobile = /^1[3456789]\d{9}$/;
      const phone = /^0\d{2,3}-?\d{7,8}$/;
      if (!mobile.test(this.tempFormData.phone) && !phone.test(this.tempFormData.phone)) {
        this.$message.error('请输入正确的联系电话');
        return false;
      }
      return this.validateFields();
    },
  },
};
</script>
<style lang="scss" scoped>
@import '../../../../../../../assets/styles/word.scss';
</style>
